<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器兼容问题解决方案</title>
    <!--上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。-->
    <!--如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下-->
    <!--例子解释：-->
    <!--ul:-->
    <!--设置列表样式类型为没有删除列表项标记-->
    <!--设置填充和边距0px（浏览器兼容性）-->
    <!--ul中所有li:-->
    <!--设置图像的URL，并设置它只显示一次（无重复）-->
    <!--您需要的定位图像位置（左0px和上下5px）-->
    <!--用padding-left属性把文本置于列表中-->
    <style>
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
        ul li
        {
            background-image: url("./image/sqpurple.gif");
            background-repeat: no-repeat;
            background-position: 0px,5px;
            padding-left: 14px;
        }
    </style>
</head>
<body>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
</body>
</html>